<script setup lang="ts">
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import Mock from '@/views/mock/day2-tree-compact'
const mountNode = ref()

const init = () => {
  // 定义数据、实例化图、加载数据、渲染图 TreeGraph
  const graph = new G6.TreeGraph({
    container: mountNode.value,
    width: document.documentElement.clientWidth * 0.6,
    height: document.documentElement.clientHeight * 0.7,
    animate: true, // 启用动画
    fitView: true, // 自动适配画布大小
    modes: {
      default: [
        {
          // 内置 Behavior 事件交互 只适用于树图，展开或收起子树
          type: 'collapse-expand',
          onChange: (item, collapsed) => {
            const data: any = item?.getModel()
            data.collapsed = collapsed
            return true
          }
        },
        'drag-canvas',
        'zoom-canvas'
      ]
    },
    defaultNode: {
      size: 30
    },
    layout: {
      type: 'mindmap',
      direction: 'H', // 布局方向
      // radial: true, // 按照辐射状布局
      getId: function getId(d: { id: any }) {
        return d.id
      },
      getHeight: function getHeight() {
        // 每个节点的高度
        return 16
      },
      getWidth: function getWidth() {
        // 每个节点的宽度
        return 16
      },
      getVGap: function getVGap() {
        // 每个节点的垂直间隙
        return 10
      },
      getHGap: function getHGap() {
        // 每个节点的水平间隙
        return 100
      }
    },
    defaultEdge: {
      type: 'cubic-horizontal',
      style: {
        lineWidth: 1,
        endArrow: {
          path: G6.Arrow.vee(5, 7, 0)
        }
      }
    }
  })

  graph.node(function (node) {
    return {
      label: node.id,
      labelCfg: {
        offset: 10,
        position: node.children && node.children.length > 0 ? 'left' : 'right'
      }
    }
  })
  // @ts-ignore
  graph.data(Mock) //  加载数据
  graph.render() // 渲染图
}

onMounted(() => {
  init()
})
</script>
<template>
  <div ref="mountNode" class="container" />
</template>

<style lang="scss" scoped>
.container {
  border: 4px solid #5b8ff9;
}
</style>
